<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <!-- 设置视口属性 -->
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>海陵区智力运动大赛报名</title>
  <script type="text/javascript">
    // 根据屏幕的宽度 来设置 html的 font-size
    // 设备的宽度
    console.log(window.screen.width);
    // 浏览器 可用的宽度
    // 移动端 用上下 两个都是可以
    console.log(window.screen.availWidth);
    // 计算 font-weight
    var fontSize = window.screen.availWidth / 20;
    document.querySelector('html').style.fontSize = fontSize + 'px';
    window.onresize = function () {
      // 计算 font-weight
      var fontSize = window.screen.availWidth / 20;
      document.querySelector('html').style.fontSize = fontSize + 'px';
    }
    // 跟媒体查询比 在移动端使用 没有优劣之分  
    // 面试问道 媒体查询 还有 js 都回答 即可
  </script>
</head>

  <style>
  	html, body {
	 	height: 100%;
	  	margin: 0;
  	}
	.content {
	 	 min-height: 100%;
	}
	.content-inside {
	  	padding-bottom: 50px;
	}
	.footer {
	  	height: 50px;
	  	margin-top: -80px;
	  	text-align:center;
	}
   dl{
      	text-align:center;
      	margin:0 1% 0 0;
      
   }
   body {
   		width:100%;
   		height:100%;
   		background: url(../../../../static/img/bg_index.png);
   		background-position: top center;
   		background-repeat: no-repeat;
   		background-attachment: fixed;
   		background-size: cover;
   		background-color: rgb(130,99, 177);
   }
   img {
   		width:100%;
   }
   .button {
	    background-color: #ccae5a; 
	    border: none;
	    color: white;
	    padding: 15px 32px;
	    text-align: center;
	    text-decoration: none;
	    display: inline-block;
	    font-size: 16px;
	    border-radius: 4px;
	    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0rgba(0,0,0,0.19);
	}

  </style>

<body>
	<div class="content" id="regist_form">
		<div class="content-inside">
			<dl>
			    <form action="/index/captain/regist" method="post">
			    	<dt style="height:30px;"></dt>
					<dt>
						<h1 style="width:100%">
							<img alt="" src="../../../../static/img/title.png">
						</h1>
						<!-- 
					    <h1 style="color:white;text-align:center;">海陵区电子竞技大赛线上报名</h1> -->
					    <!-- 
					    <p style="color:white;">姓名:<input type="text" name="UserName"></p> -->
					</dt>
					<dt>
					  <p style="color:white;font-size:30px;">手机: <input type="text" name="phone" style="height:30px;"></p>
					</dt>
							
					<dt>
					  <p><input type="submit" class="button" value="确定"></p>
					</dt>
		
					  
		
			    </form>
			</dl>
		</div>
	</div>
	<footer class="footer" >
		<div align="center">
			<div style="width:70%;"><img alt="" src="../../../../static/img/foot.png">
			</div>
		</div>
	</footer>


</body>

</html>




